<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-课堂作业-单词闯关'"> </Breadcrumb>
        <view class="content">
          <WordLook
            ref="wordLook"
            v-if="stage === 1"
            :key="componentKey"
            :chapterData="chapterData"
            :wordData="wordData"
            @change="wordChange"
            @save="wordSave"
          ></WordLook>
          <WordListen
            ref="wordListen"
            v-else-if="stage === 2"
            :key="componentKey"
            :chapterData="chapterData"
            :wordData="wordData"
            @change="wordChange"
            @save="wordSave"
          ></WordListen>
          <WordTest
            ref="wordTest"
            v-else-if="stage === 3"
            :key="componentKey"
            :chapterData="chapterData"
            :wordList="wordList"
            @save="testSave"
            @close="handleClose"
          ></WordTest>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  findWordPassByChapterId,
  classworkPassSave,
  testCommit,
} from "@/api/classWork";
export default {
  components: {},
  data() {
    return {
      chapterId: "",
      stage: 0,
      chapterData: null,
      wordData: null,
      componentKey: 0,
    };
  },
  onLoad(option) {
    this.chapterId = option.chapterId;
    this.init();
  },
  methods: {
    init() {
      //default
      this.getWord();
    },
    wordChange() {
      this.getWord().then(() => {
        this.componentKey += 1;
      });
    },
    async getWord() {
      let params = {
        id: this.chapterId,
      };
      await findWordPassByChapterId(params).then((res) => {
        this.stage = res.data.stage;
        if (this.stage === 1 || this.stage === 2) {
          this.chapterData = res.data.bookChapter;
          this.wordData = res.data.word;
        } else if (this.stage === 3) {
          this.chapterData = res.data.bookChapter;
          this.wordList = res.data.list;
        }
      });
    },
    wordSave(id, flag) {
      let params = {
        chapterId: this.chapterId,
        wordId: id,
        isPass: flag,
        stage: this.stage,
      };
      classworkPassSave(params);
    },
    testSave() {
      let params = {
        id: this.chapterId,
      };
      testCommit(params).then((res) => {
        this.$refs.wordTest.handlePopup(res.data.hasGold, res.data.goldNum);
      });
    },
    handleClose() {
      uni.redirectTo({
        url: "/pages/classWork/classWork",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./classWorkPassDetail";
</style>
